<template>
	<div style="width: 100%;height: 100%;">
		<!-- 查询 -->
		<div class="search">
			<input type="text" placeholder="吃出美好生活" @focus="goSearch"/>
			<img src="../../static/car1.svg" alt=""/>
		</div>
		
		<div class="classify">
			<div class="left">
				<p 
					v-for="(item,index) in classfiyList" 
					:key="index" 
					:class="index == classfit_active ? 'active' : ''"
					@click="clickClassfiy(item,index)"
				>
					{{item.name}}
				</p>
			</div>
			<div class="right">
				<commodityItem v-for="(item,index) in commoditList" :key="index" :data="item"></commodityItem>
				<van-empty
				  class="custom-image"
				  image="https://img.yzcdn.cn/vant/custom-empty-image.png"
				  description="尽请期待"
				  v-if="commoditList.length == 0"
				  style="position: absolute; top: 50%;left: 50%; transform: translate(-50%,-50%);"
				/>
			</div>
		</div>
	</div>
</template>

<script>
	import commodityItem from "../../components/commodity_item/index.vue"
	import {getDictionaryItem , getCommodityList} from "../../api/classfiy.js" 
	export default {
		data(){
			return {
				classfiyList:[],
				classfit_active:0,
				commoditList:[]
			}
		},
		components:{ commodityItem },
		
		onLoad() {
			this.getClassfiyAll() // 获取分类
		},
		
		methods:{
			goSearch(){
				uni.navigateTo({
					url:'/subPackages/pages/search/index'
				})
			},
			
			// 获取全部分类
			async getClassfiyAll(){
				let result = await getDictionaryItem('classfiy_mngs')
				if(result.code == 20000 && result.data.length != 0){
					this.classfiyList = result.data
					this.clickClassfiy(result.data[0],0)
				}
				console.log(result); 
			},
			
			// 点击分类
			async clickClassfiy(item,index){
				let result = await getCommodityList({commodityClassify:item.code , shelfOrNot: true})
				if(result.code == 20000){
					this.commoditList = result.data
					console.log(result);
					this.classfit_active = index
				}
			}
		}
	}
</script>

<style scoped>
	.search {
		width: 100%;
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 5px 10px;
		box-sizing: border-box;
	}
	
	.search input {
		flex: 1;
		height: 100%;
		border-radius: 15px;
		background: #f1f3f5;
		font-size: 12px;
		color: #333;
		padding: 0 10px;
		box-sizing: border-box;
	}
	
	.search img {
		width: 20px;
		height: 20px;
		margin-left: 10px;
	}
	
	.classify {
		width: 100%;
		height: calc(100% - 50px);
		display: flex;
		justify-content: space-between;
	}
	
	.classify .left {
		width: 30%;
		height: 100%;
		background: #f1f1f1;
	}
	
	.classify .left p {
		padding: 10px;
		width: 100%;
		color: #333;
		font-size: 14px;
		text-align: center;
	}
	
	.active {
		background: #fff !important;
		color: #1BA035 !important;
		font-weight: 700;
	}
	
	.classify .right {
		flex: 1;
		padding: 5px;
		box-sizing: border-box;
		overflow-y: auto;
		position: relative;
	}
</style>